<template>
  <div>
    <el-drawer
      title="套餐转让"
      :visible.sync="isShow"
      :before-close="closeDrawer"
      size="50%"
    >
      <!-- <div class="app-main-title">转让信息</div> -->
      <div>
        <el-form
          ref="form"
          class="doumee-form"
          :rules="rules"
          :model="param"
          label-width="120px"
          label-suffix="："
          @submit.native.prevent
        >
          <!-- <el-form-item label="转出会员卡" prop="outCardId">
          <el-input v-model="outNum" placeholder="请输入卡号/手机号" class="input-with-select bottom-speace-style w400" @keyup.enter.native="outSearchAction">
            <el-button slot="append" icon="el-icon-search" @click="outSearchAction" />
          </el-input>
          <div v-if="showOut" class="card-message w400">
            <div class="first-line">
              <span class="message-title-style">NO.</span>
              <span class="message-value-style">{{ outMessage.number }}</span>
              <span class="message-value-style">{{ outMessage.nickName }}</span>
              <span v-if="outMessage.cardName" class="card-name-style">{{ outMessage.cardName }}</span>
              <button class="message-title-style close-style" @click="closeOut">x</button>
            </div>
            <div class="first-line">
              <span class="message-title-style">手机：</span>
              <span class="message-value-style">{{ outMessage.phone }}</span>
              <span class="message-title-style">充值金额：</span>
              <span class="message-value-style">{{ outMessage.remainingMoney?outMessage.remainingMoney:0 }}</span>
              <span class="message-title-style">赠送金额：</span>
              <span class="message-value-style">{{ outMessage.remainingGiveMoney?outMessage.remainingGiveMoney:0 }}</span>
            </div>
          </div>
        </el-form-item> -->
          <el-form-item label="转出会员卡" prop="outCardId">
            <div style="width: 520px">
              <MemberSearch
                placeholder="会员昵称/手机号/卡号"
                @clear="outMemberClear"
                @select="outMemberSelect"
              />
              <div v-if="outMessage && outMessage.nickName" class="member_info">
                <div class="item">姓名：{{ outMessage.nickName }}</div>
                <div class="item">手机号：{{ outMessage.phone }}</div>
                <div class="item">会员等级：{{ outMessage.cardName }}</div>
                <div class="item">
                  充值余额：<span>{{ outMessage.rechargeMoney || 0 }}</span>
                </div>
                <div class="item">
                  赠送余额：<span>{{ outMessage.giveMoney || 0 }}</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            v-if="showOut && isRequired === '1'"
            label="会员卡密码"
            prop="pwd"
          >
            <el-input
              v-model="param.pwd"
              placeholder="请输入会员卡密码"
              type="password"
              class="input-with-select w400"
              auto-complete="new-password"
              maxlength="6"
              clearable
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <el-form-item v-if="outMessage.id" label="选择套餐" prop="mealsId">
            <el-select
              v-model="param.mealsId"
              placeholder="选择套餐"
              class="w400"
              @change="changeType"
            >
              <el-option
                v-for="item in meals"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="转入会员卡" prop="inCardId">
            <div style="width: 520px">
              <MemberSearch
                placeholder="会员昵称/手机号/卡号"
                @clear="inMemberClear"
                @select="inMemberSelect"
              />
              <div v-if="inMessage && inMessage.nickName" class="member_info">
                <div class="item">姓名：{{ inMessage.nickName }}</div>
                <div class="item">手机号：{{ inMessage.phone }}</div>
                <div class="item">会员等级：{{ inMessage.cardName }}</div>
                <div class="item">
                  充值余额：<span>{{ inMessage.rechargeMoney || 0 }}</span>
                </div>
                <div class="item">
                  赠送余额：<span>{{ inMessage.giveMoney || 0 }}</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="param.mealsId" label="转让手续费">
            <div>
              {{ serviceChargePrice ? serviceChargePrice + "元" : "免费" }}
            </div>
          </el-form-item>
          <!-- <el-form-item label="转入会员卡" prop="inCardId">
          <el-input v-model="inNum" placeholder="请输卡号/手机号" class="input-with-select bottom-speace-style w400" @keyup.enter.native="inSearchAction">
            <el-button slot="append" icon="el-icon-search" @click="inSearchAction" />
          </el-input>
          <div v-if="showIn" class="card-message w400">
            <div class="first-line">
              <span class="message-title-style">NO.</span>
              <span class="message-value-style">{{ inMessage.number }}</span>
              <span class="message-value-style">{{ inMessage.nickName }}</span>
              <span v-if="inMessage.cardName" class="card-name-style">{{ inMessage.cardName }}</span>
              <button class="message-title-style close-style" @click="closeIn">x</button>
            </div>
            <div class="first-line">
              <span class="message-title-style">手机：</span>
              <span class="message-value-style">{{ inMessage.phone }}</span>
              <span class="message-title-style">充值金额：</span>
              <span class="message-value-style">{{ inMessage.remainingMoney?inMessage.remainingMoney:0 }}</span>
              <span class="message-title-style">赠送金额：</span>
              <span class="message-value-style">{{ inMessage.remainingGiveMoney?inMessage.remainingGiveMoney:0 }}</span>
            </div>
          </div>
        </el-form-item> -->
          <el-form-item label="转让说明">
            <el-input v-model="param.info" class="code-style" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              :loading="subLoading"
              type="primary"
              @click="onSubmit()"
            >确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <orderDialog ref="child" @orderSuccess="getList" />
  </div>
</template>

<script>
import { VIPInfo, findTransferMeals, transferMeals, isMemberCardPwd, getServiceChargePrice } from '@/api'
import MemberSearch from '@/components/MemberSearch'
import orderDialog from '@/components/order'
export default {
  components: {
    MemberSearch,
    orderDialog
  },
  data() {
    return {
      isShow: false,
      subLoading: false,
      mealId: '',
      meals: [],
      showOut: false,
      isRequired: '0',
      outMessage: {},
      remark: '',
      showIn: false,
      inMessage: {},
      outNum: '',
      inNum: '',
      cardPwd: '',
      param: {},
      serviceChargePrice: '',
      // 表单校验
      rules: {
        outCardId: [
          { required: true, message: '请输入转出卡号/手机号,并搜索会员' }
        ],
        pwd: [
          { required: true, message: '请输入会员卡密码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入6位会员卡密码', trigger: 'blur' }
        ],
        inCardId: [
          { required: true, message: '请输入转入卡号/手机号,并搜索会员', trigger: 'blur' }
        ],
        mealsId: [
          { required: true, message: '请选择套餐', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入转让说明', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    isMemberCardPwd({ param: {}})
      .then((res) => {
        if (res.errorCode !== '000000') return
        this.isRequired = res.record.isRequired || '0'
      })
      .catch(() => { })
  },
  methods: {
    closeDrawer() {
      this.$emit('close')
    },
    // outSearchAction() {
    //   if (!this.outNum.length) {
    //     this.$message.warning('请输入转出会员卡号/手机号')
    //     return
    //   }
    //   VIPInfo({ param: {
    //     phoneOrNo: this.outNum
    //   }})
    //     .then(res => {
    //       // console.log(res)
    //       if (res.errorCode === '000000') {
    //         this.outMessage = res.record
    //         this.$set(this.param, 'outCardId', this.outMessage.number)
    //         this.$refs.form.clearValidate()
    //         if (this.outMessage) {
    //           this.showOut = true
    //           this.getMealList()
    //         }
    //       }
    //     })
    //     .catch(() => {
    //       this.outMessage = {}
    //       this.showOut = false
    //       this.param.outCardId = ''
    //     })
    // },
    outMemberSelect(item) {
      this.outMessage = item
      this.$set(this.param, 'outCardId', item.number)
      this.$refs.form.clearValidate()
      if (this.outMessage) {
        this.showOut = true
        this.getMealList()
      }
    },
    outMemberClear() {
      this.outMessage = {}
      this.param.outCardId = ''
      this.showout = false
    },
    inMemberSelect(item) {
      this.inMessage = item
      this.$set(this.param, 'inCardId', item.number)
      this.$refs.form.clearValidate()
      if (this.inMessage) {
        this.showIn = true
      }
    },
    inMemberClear() {
      this.inMessage = {}
      this.param.inCardId = ''
      this.showIn = false
    },
    inSearchAction() {
      if (!this.inNum.length) {
        this.$message.warning('请输入转入会员卡号/手机号')
        return
      }
      VIPInfo({
        param: {
          phoneOrNo: this.inNum
        }
      })
        .then(res => {
          // console.log(res)
          if (res.errorCode === '000000') {
            this.inMessage = res.record
            this.$set(this.param, 'inCardId', this.inMessage.number)
            this.$refs.form.clearValidate()
            if (this.inMessage) {
              this.showIn = true
            }
          }
        }).catch(err => {
          console.log(err)
          this.inMessage = {}
          this.showIn = false
          this.param.inCardId = ''
        })
    },
    getMealList() {
      findTransferMeals({
        param: {
          memberId: this.outMessage.id,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then(res => {
          this.meals = res.recordList
        }).catch(err => {
          console.log(err)
        })
    },
    closeOut() {
      // this.param.outId = null
      this.showout = false
    },
    closeIn() {
      // this.param.inId = null
      this.showIn = false
    },
    changeType() {
      this.$refs.form.clearValidate()
      if (this.param.mealsId) {
        this.getServiceChargePriceBtn(1, this.param.mealsId)
      }
    },
    getServiceChargePriceBtn(type, mealsMemberId) {
      this.serviceChargeId = mealsMemberId
      getServiceChargePrice({
        param: {
          type,
          mealsMemberId
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.serviceChargePrice = res.record.price
        }
      })
        .catch(() => { })
    },
    getList() {
      setTimeout(() => {
        this.$message.success('转让成功')
        this.isShow = false
        this.$emit('success')
      }, 300)
    },
    onSubmit() {
      const param = { ...this.param }
      param.isCreateOrder = '1'
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.subLoading = true
          transferMeals({ param })
            .then(res => {
              // console.log(res)
              this.subLoading = false
              if (res.errorCode === '000000') {
                const obj = res.record || {}
                if (obj && obj.serviceChargeOrderInfo && obj.price) {
                  obj.goodsInfos = obj.serviceChargeOrderInfo
                  obj.allPrice = obj.price
                  this.$refs.child.continuePay(obj, 'handlingFees')
                } else {
                  this.isShow = false
                  this.closeDrawer()
                  this.$message.success('套餐转让成功')
                }
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-message {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.member_info {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item {
    width: 33.33%;
    line-height: 28px;
    height: 28px;
  }
}
</style>
